<template>
  <div id="app" class="yarn-info">
    <!-- 头部导航 -->
    <van-nav-bar title="细纱信息" left-text="返回" left-arrow @click-left="comeBack" @click-right="scanFn">
      <template #right>
        <van-icon name="scan" size="20" />
      </template>
    </van-nav-bar>
    <!-- 滚动 -->
    <div class="body-scroll" :data="yarnInfo">
      <van-cell-group>
        <van-cell center title-class="title" title="编号" :value="yarnInfo.no"></van-cell>
        <van-cell center title-class="title" title="名称" :value="yarnInfo.name"></van-cell>
        <van-cell center title-class="title" title="支数" :value="yarnInfo.standard"></van-cell>
        <van-cell center title-class="title" title="颜色" :value="yarnInfo.colorName"></van-cell>
        <van-cell center title-class="title" title="成份" :value="yarnInfo.composition"></van-cell>
        <van-cell center title-class="title" title="单位" :value="yarnInfo.unitFormat"></van-cell>
        <van-cell center title-class="title" title="库存" :value="yarnInfo.stock" ref="stockCellRef" is-link @click="showBatchFn"></van-cell>
        <div class="batch-body" v-show="showBatch && yarnInfo.batches.length > 0">
          <van-cell-group style="border: #e6a23c 1px solid; margin-bottom: 1vh" inset v-for="batch in yarnInfo.batches">
            <van-cell title="批次" :value="batch.no"></van-cell>
            <van-cell title="库存" :value="batch.stock"></van-cell>
            <van-cell title="包数" :value="batch.packNum"></van-cell>
            <van-cell title="预计库存" :value="batch.expectStock"></van-cell>
            <van-cell center title="区域">
              <template #default>
                <van-popover v-model="batch.showBatchPop" trigger="click" placement="bottom-end">
                  <template #default>
                    <van-row style="width: 70vw; border: #1989fa 1px solid; margin: 1vh 2vw" v-for="area in batch.areas">
                      <van-col :span="8">区域:{{ area.area }}</van-col>
                      <van-col :span="8">库存:{{ area.stock }}</van-col>
                      <van-col :span="8">包数:{{ area.packNum }}</van-col>
                    </van-row>
                  </template>
                  <template #reference>
                    <van-button style="height: 3vh;font-size: 1.05rem" size="mini">{{ batch.area }}</van-button>
                  </template>
                </van-popover>
              </template>
            </van-cell>
            <van-cell title="实际回潮" :value="batch.actMoisture"></van-cell>
            <van-cell title="标准回潮" :value="batch.stdMoisture"></van-cell>
          </van-cell-group>
        </div>
        <van-cell center title-class="title" title="库存区域" :value="yarnInfo.areas"></van-cell>
        <van-cell center title-class="title" title="预计库存" :value="yarnInfo.expectStock"></van-cell>
        <van-cell center title-class="title" title="样品位置" :value="yarnInfo.sampleArea"></van-cell>
      </van-cell-group>
    </div>
    <div style="position: absolute; bottom: 2vh; width:100vw; display: flex; justify-content: center;align-items: center" v-permissions="'10_183'">
      <van-button type="primary" style="width: 30vw" @click="yarnSampleOutFn">纱样取用</van-button>
      <van-button type="warning" style="margin-left: 10vw;width: 30vw" @click="yarnSampleInFn">纱样归还</van-button>
    </div>

  </div>
</template>

<script>
import {comeBack, openWin} from "@/utils";
import {loadYarnBatchData, loadYarnDetail, loadYarnDetailByCode, yarnSampleIn, yarnSampleOut} from "@/api/yarn";
import {SPLIT_BLANK, SPLIT_COMMA, SPLIT_XG} from "@/api/enum";

export default {
  name: "yarnInfo",
  data() {
    return {
      /* 细纱信息 */
      yarnInfo: {
        id: 0,
      },

      /* 批次弹窗相关 */
      showBatch: false,
    }
  },
  mounted() {
    const that = this;
    if (process.env.NODE_ENV === "production") {
      this.$nextTick(() => {
        that.initFn(that);
      });
    } else {
      window.apiready = function () {
        that.initFn(that);
      };
    }
  },
  methods: {
    comeBack,
    openWin,

    /* 初始化 */
    initFn() {
      const that = this;
      that.yarnInfo.id = window.api.pageParam.yarnId;
      if(that.yarnInfo.id) {
        that.loadYarnDetailFn();
      } else {
        let scanCode = window.api.pageParam.scanCode;
        loadYarnDetailByCode({
          code: scanCode
        }, that.processYarnFn);
      }
    },

    /* 扫码 */
    scanFn() {
      const that = this;
      const zyHmsScan = api.require('zyHmsScan');
      zyHmsScan.openDefaultView({}, ret => {
        if(ret.status) {
          if(ret.result.startsWith("29,")) {
            that.yarnInfo.id = ret.result.substring(3);
            that.loadYarnDetailFn();
          } else {
            that.$toast.fail("请扫细纱码");
          }
        }
      });
    },

    /* 加载纱线 */
    loadYarnDetailFn() {
      const that = this;
      loadYarnDetail(that.yarnInfo.id, that.processYarnFn);
    },
    processYarnFn(yarn) {
      const that = this;
      yarn.standard = Number(yarn.standard) + SPLIT_XG + yarn.strandNum;
      let composition = eval("(" + yarn.composition + ")");
      yarn.composition = composition.map(m => m.type + m.content).join(SPLIT_COMMA);
      yarn.unitFormat = yarn.unitFormat == 1 ? '公制' : yarn.unitFormat == 2 ? '英制' : 'D制';

      //获取批次
      loadYarnBatchData({yarnId: yarn.id}, res => {
        if(res.code) {
          yarn.batches = [];
          that.yarnInfo = yarn;
          return;
        }
        yarn.batches = res;
        res.forEach(batch => {
          batch.showBatchPop = false;
          batch.area = Array.from(new Set(batch.areas.map(area => area.area))).filter(area => area && area != SPLIT_BLANK).join(SPLIT_COMMA);
        });
        yarn.areas = Array.from(new Set(yarn.batches.map(batch => batch.area))).filter(area => area && area != SPLIT_BLANK).join(SPLIT_COMMA);
        that.yarnInfo = yarn;
      });
    },

    /* 显示批次 */
    showBatchFn() {
      const that = this;
      that.showBatch = !that.showBatch;
      if(that.showBatch) {
        that.$refs.stockCellRef.getElementsByClassName("van-cell__right-icon")[0].style.transform = "rotate(90deg)"
      } else {
        that.$refs.stockCellRef.getElementsByClassName("van-cell__right-icon")[0].style.transform = "rotate(0deg)"
      }
      that.$forceUpdate();
    },

    /* 纱样取用 */
    yarnSampleOutFn() {
      const that = this;
      yarnSampleOut({ yarnId: that.yarnInfo.id }, res => {
        that.$toast.success("取用成功");
      });
    },

    /* 纱样归还 */
    yarnSampleInFn() {
      const that = this;
      yarnSampleIn({ yarnId: that.yarnInfo.id }, res => {
        that.$toast.success("归还成功");
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.yarn-info {
  .body-scroll {
    height: 90vh;
    overflow: auto;
    ::v-deep .van-cell {
      font-size: 1.05rem;
      /*.van-cell__title {
        flex: 0 0 25vw;
      }*/
      .title {
        flex: 0 0 20vw;
      }
      .arrow-direct {
        transform: rotate(-90deg);
      }
    }

    .batch-body {
      height: 40vh;
      overflow: auto;
    }
  }
}
</style>